<template>
  <div class="body">
    <swiper
      ref="mySwiper"
      @mouseenter.native="stop"
      @mouseleave.native="start"
      class="swiper"
      :options="swiperOption"
    >
      <swiper-slide><img src="/banner/banner1.png" alt="" /></swiper-slide>
      <swiper-slide><img src="/banner/banner2.png" alt="" /></swiper-slide>
      <swiper-slide><img src="/banner/banner3.png" alt="" /></swiper-slide>
      <swiper-slide><img src="/banner/banner4.png" alt="" /></swiper-slide>
      <swiper-slide><img src="/banner/banner5.png" alt="" /></swiper-slide>

      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

    <companys-index></companys-index>
    <worker-index></worker-index>
    <price-index></price-index>
    <compass-index />
    <!-- <router-view /> -->
  </div>
</template>

<script>
import CompanysIndex from "@/components/CompanysIndex.vue"
import WorkerIndex from "@/components/WorkerIndex.vue"
import PriceIndex from "@/components/PriceIndex.vue"
import CompassIndex from "@/components/CompassIndex.vue"
export default {
  methods: {
    stop() {
      this.$refs.mySwiper.$swiper.autoplay.stop()
    },
    start() {
      this.$refs.mySwiper.$swiper.autoplay.start()
    },
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 2000,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
        },
      },
    }
  },
  components: { CompanysIndex, WorkerIndex, PriceIndex, CompassIndex },
  beforeCreate() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#eee")
  },
  beforeDestroy() {
    document.querySelector("body").setAttribute("style", "background:#fff")
  },
}
</script>

<style lang="scss" scoped>
// .body {
//   height: 100vh;
//   background-color: #eee;
// }
.swiper {
  width: 1200px;
  margin: 10px auto;
  border-radius: 20px;

  img {
    width: 100%;
  }
  .swiper-button-prev {
    color: #e4464b;
  }
  .swiper-button-next {
    color: #e4464b;
  }
  ::v-deep .swiper-pagination-bullet {
    background-color: #e4464b;
  }
  ::v-deep .swiper-pagination-bullet-active.swiper-pagination-bullet {
    background-color: #e4464b;
  }
}
</style>
